<template>
  <div class="login">
    <div class="login-left">
      <img src="@/assets/img/leftlogin.png" alt="" />
    </div>
    <div class="login-right">
      <div class="content">
        <div class="title">
          <img src="@/assets/img/loginTitle.png" alt="" />
          <span class="title-content">Unisign</span>
          <span class="title-content">电子签约平台</span>
        </div>
        <div class="login-way">
          <el-tabs v-model="loginActiveName">
            <el-tab-pane label="账号密码登录" name="account">
              <login-account ref="accountRef" />
            </el-tab-pane>
            <el-tab-pane label="手机验证码登录" name="moblie">
              <login-moblie ref="moblieRef" />
            </el-tab-pane>
            <el-tab-pane label="Ukey登录" name="key">
              <login-key ref="keyRef" />
            </el-tab-pane>
          </el-tabs>
          <template
            v-if="loginActiveName === 'account' || loginActiveName === 'moblie'"
          >
            <div class="account-control">
              <el-checkbox v-model="isKeepPassword">记住密码</el-checkbox>
              <el-link type="primary">忘记密码</el-link>
            </div>
            <el-button
              class="login-btn"
              type="primary"
              @click="toLogin"
              @keyup.enter.native="toLogin"
              >登录</el-button
            >
            <div class="register">
              <span>没有账号，</span>
              <span class="register-span">点击注册</span>
            </div>
          </template>
        </div>
      </div>
      <div class="footer">
        <router-link tag="a" to="">帮助</router-link>
        <router-link tag="a" to="">隐私</router-link>
        <router-link tag="a" to="">条款</router-link>
        <span
          ><span class="versions">{{ VERSION }}&nbsp;&nbsp;版权所有</span
          >copyright©2020 北京华信云盛科技有限公司<a
            href="https://beian.miit.gov.cn"
            target="_blank"
            class="Record"
            >京ICP备20031055号-3</a
          ></span
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import LoginAccount from './cpns/login-account.vue'
import LoginMoblie from './cpns/login-moblie.vue'
import LoginKey from './cpns/login-key.vue'

// 版本号
const VERSION = ref<string>('')
VERSION.value = import.meta.env.VITE_VERSION as string

// 属性
const isKeepPassword = ref(false)
const accountRef = ref<InstanceType<typeof LoginAccount>>()
const moblieRef = ref<InstanceType<typeof LoginMoblie>>()
const keyRef = ref<InstanceType<typeof LoginKey>>()
const loginActiveName = ref<string>('account')

// 登录
document.onkeydown = (e) => {
  const key = e.keyCode
  if (key === 13) {
    toLogin()
  }
}
const toLogin = () => {
  if (loginActiveName.value === 'account') {
    accountRef.value?.accountLogin(isKeepPassword.value)
  } else if (loginActiveName.value === 'moblie') {
    moblieRef.value?.moblieLogin(isKeepPassword.value)
  }
}
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  min-height: 800px;
  display: flex;
  justify-content: space-between;
  .login-left {
    height: 100%;
    width: 44%;
    min-width: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f5fa;
  }
  .login-right {
    height: 100%;
    width: 56%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content {
      width: 85%;
      min-width: 700px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 120px;
      .title {
        height: 50px;
        line-height: 50px;
        font-size: 26px;
        color: #485672;
        font-weight: 600;
        img {
          vertical-align: middle;
          margin-top: -5px;
          margin-right: 13px;
        }
        .title-content {
          margin-right: 10px;
        }
      }
      .login-way {
        margin-top: 70px;
        :deep(.el-tabs__item) {
          height: 50px;
          font-size: 17px;
        }
        .account-control {
          display: flex;
          justify-content: space-between;
          margin-top: 6px;
        }
        .login-btn {
          height: 50px;
          width: 100%;
          margin-top: 10px;
          background: #2489f2;
          font-size: 15px;
        }
        .register {
          margin-top: 20px;
          text-align: center;
          font-size: 13px;
          color: black;
          .register-span {
            color: #2489f2;
          }
          .register-span:hover {
            cursor: pointer;
          }
        }
      }
    }
    .footer {
      height: 40px;
      margin-bottom: 70px;
      padding-left: 140px;
      color: #999999;
      font-size: 13px;
      a {
        color: #999999;
        font-size: 13px;
        padding: 0 20px;
        border-right: 1px solid #dbdbdb;
        text-decoration: none;
      }
      a:nth-child(3) {
        border: none;
      }
      .Record {
        text-decoration: none;
        margin-left: 8px;
        border: none;
        padding: 0;
      }
      .Record:hover {
        color: #fc5531;
        text-decoration: underline;
      }
    }
  }
}
</style>
